<template>
  <MainLayout>
    <template #header>
      <div class="flex_block header_modal" @click="handleBack">
        <el-icon class="title icon"><ArrowLeftBold /></el-icon>
        <div class="title">测试记录用例详情</div>
      </div>
    </template>
    <template #main>
      <!-- 内容 -->
      <div class="content" v-loading="loading">
        <el-collapse
          v-model="case_active"
          class="el_collapse"
          v-for="item in test_case_data"
          :key="item.parentId"
        >
          <div class="collapse_item" v-if="item.children.length != 0">
            <el-collapse-item :name="item.parentId" class="collapse_block_item">
              <!-- 头部 -->
              <template #title="{ isActive }">
                <div :class="['title-wrapper', { 'is-active': isActive }]">
                  <el-divider direction="vertical" />
                  {{ item.parentName }}
                </div>
              </template>
              <!-- 子内容 -->
              <div
                class="flex_block collapse_item_content"
                v-for="child in item.children"
                :key="child.id"
              >
                <MyCllapse :title="child.name">
                  <template #main>
                    <div class="tabs_block">
                      <el-tabs v-model="child.tabs_active">
                        <el-tab-pane
                          :label="tabs.label"
                          :name="tabs.id"
                          v-for="tabs in child.caseDetail.list"
                          :key="tabs.id"
                        >
                          <MyTabMain
                            :tabsId="tabs.id"
                            :dataInfo="child.caseDetail"
                          ></MyTabMain>
                        </el-tab-pane>
                      </el-tabs>
                    </div>
                  </template>
                </MyCllapse>
                <div class="color_success img_block flex_block">
                  <el-icon><Select /></el-icon>
                </div>
              </div>
            </el-collapse-item>
          </div>
        </el-collapse>
      </div>
    </template>
  </MainLayout>
</template>

<script setup>
import MyCllapse from "./components/my-cllapse.vue";
import MyTabMain from "./components/my-tab-main.vue";
import { GetTestRecordDetail } from "@/api/test_case";

const loading = ref(false);
const test_case_data = ref([]);
const case_active = ref([]); //四大模块 的 展开
const router = useRouter();

onMounted(() => {
  loading.value = true;
  GetTestRecordDetail()
    .then((res) => {
      console.log(res);
      let list = [];
      list = JSON.parse(JSON.stringify(res.info)) || [];
      // 默认展开所以数据
      if (list.length > 0) {
        case_active.value = list.map((item) => item.parentId);
      }
      list.forEach((item) => {
        // 确保 children 是响应式的
        item.children = item.children.map((child) =>
          reactive({
            ...child,
            // tabs_active: child.caseData?.[0]?.id || null,
            tabs_active:child.caseDetail?.list?.[0].id || null,
          })
        );
        item.children.forEach((child) => {
          if (child.caseDetail && child.caseDetail.list) {
            console.log('进来了',child.caseDetail.list);
            child.caseDetail.list = child.caseDetail.list.filter(va => va.show == 'true')
            console.log('bianl',child.caseDetail.list);

          }
        });
      });
      test_case_data.value = list;
    })
    .finally(() => {
      loading.value = false;
    });
});
// 返回
const handleBack = () => {
  router.back();
};
</script>

<style scoped lang="scss">
.header_modal {
  width: 100%;
  align-items: center;
  cursor: pointer;
  .title {
    margin-top: -6px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 18px;
  }
}
.content {
  overflow-y: scroll;
  height: 100%;
  background-color: #fff;
  padding: 0 40px;
}
.el_collapse {
  border-bottom: none;
  border-top: none;
}
.collapse_item {
  display: flex;
  width: 100%;
  .collapse_block_item {
    width: 100%;
  }
}

.title-wrapper {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.el-divider--vertical {
  width: 2px;
  border-left: 2px var(--el-color-primary) var(--el-border-style);
  margin-right: 2px;
}

.collapse_item_content {
  margin-left: 20px;
}
.flex_block {
  display: flex;
}
.img_block {
  width: auto;
  margin: 0 10px;
  height: 48px;
  font-size: 20px;
  align-items: center;
  cursor: auto;
}

.tabs_block {
  width: 100%;
  height: auto;
  min-height: 300px;
  background-color: #f7f7f7;
  padding: 30px;
  padding-top: 10px;
  border-radius: 8px;
}
:deep(.is-active) {
  font-weight: 700 !important;
}
:deep(.el-empty) {
  padding: 0 !important;
  margin: 0 !important;
}
</style>